<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>New Tab</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <a class="btn-setting">
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"  color="#ccc">
            <line x1="3" y1="9" x2="33" y2="9"></line>
            <line x1="3" y1="18" x2="33" y2="18"></line>
            <line x1="3" y1="27" x2="33" y2="27"></line>
        </svg>
    </a>
    <aside class="setting" style="display: none;">
        <fieldset>
            <label for="slogan">寄语</label>
            <input type="text" name="slogan" placeholder="想对自己说什么">
        </fieldset>

        <fieldset class="fl">
            <label for="birthday">生日</label>
            <input type="date" name="birthday" value="" placeholder="birthday">
        </fieldset>

        <fieldset class="fr">
            <label for="lifeYear">退休年龄</label>
            <input type="text" name="lifeYear" id="lifeYear" placeholder="退休年龄" style="width: 90px;" />
        </fieldset>

        <fieldset>
            <label for="lifeWidget">人生计时器组件</label>
            <select name="widget" id="lifeWidget">
                <option value="no">不显示</option>
                <option value="calendar">月历型</option>
                <option value="clock">时钟型</option>
                <option value="countdown">文本倒计时</option>
            </select>
        </fieldset>
        <button class="save">保 存</button>

    </aside>
    
    <div class="wrapper">
        <div id="power">生之短 Short Life</div>

        <div id="slogan">您好, 世界!</div>

        <div class="search">
            <div class="input-container">
                <form action="https://www.baidu.com/s" method="get">
                    <input type="search" name="q" placeholder="搜索"/>
                </form>
            </div>
            <div id="suggest">

            </div>
        </div>

        <time id="clock">
            <span class="hour"></span> :
            <span class="minute"></span> :
            <span class="second"></span>
        </time>
        
        <time id="date">
            <span class="year"></span> /
            <span class="month"></span> /
            <span class="day"></span>
        </time>

        <div id="weather">

        </div>
        <!--人生月历-->
        <div id="lifeCalendar"></div>

        <!--人生倒计时-->
        <div id="lifeCountDown"></div>

        <!--人生钟表-->
        <div id="lifeClock">

            <div class="origin"></div>

            <div class="dot_box">
                <div class="dot">6</div>
                <div class="dot">5</div>
                <div class="dot">4</div>
                <div class="dot">3</div>
                <div class="dot">2</div>
                <div class="dot">1</div>
                <div class="dot">12</div>
                <div class="dot">11</div>
                <div class="dot">10</div>
                <div class="dot">9</div>
                <div class="dot">8</div>
                <div class="dot">7</div>
            </div>

            <div class="clock_line hour_line" id="hour_line"></div>
            <div class="clock_line minute_line" id="minute_line"></div>
            <div class="clock_line second_line" id="second_line"></div>

            <div id="lifeClockInfo"></div>

        </div>
    </div>
    

<script src="jquery.min.js"></script>
<script src="app.js"></script>

</body>
</html>